<template>
  <div>
    <!-- 面包屑导航栏 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item>库存管理</el-breadcrumb-item>
      <el-breadcrumb-item>库存记录</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 搜索框区域 -->
    <div class="toolbar">
      <el-form :inline="true" :model="searchQuery" class="search-form">
        <el-form-item>
          <el-input v-model="searchQuery.recordId" placeholder="库存ID" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="searchQuery.productId" placeholder="商品ID" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="searchQuery.changeAmount" placeholder="变动数量" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-date-picker
            v-model="searchQuery.createdAt"
            type="datetime"
            placeholder="记录创建时间"
            clearable
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchRecords">搜索</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 添加和删除按钮 -->
    <div class="action-bar">
      <el-button type="primary" @click="openAddStockRecordDialog">添加库存记录</el-button>
      <el-button type="danger" @click="deleteSelectedRecords">删除选中记录</el-button>
      <el-button type="success" @click="exportToExcel">库存数据导出Excel</el-button> <!-- 添加的按钮 -->
      <el-button type="success" @click="exportToExcel">库存数据导入Excel</el-button> <!-- 添加的按钮 -->
    </div>

    <!-- 数据列表 -->
    <el-table :data="filteredStockRecords" style="width: 100%">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="recordId" label="库存ID" width="80"></el-table-column>
      <el-table-column prop="productId" label="商品ID" width="80"></el-table-column>
      <el-table-column prop="changeAmount" label="变动数量" width="180"></el-table-column>
      <el-table-column prop="note" label="备注说明"></el-table-column>
      <el-table-column prop="createdAt" label="记录创建时间" width="180"></el-table-column>
      <el-table-column prop="creator" label="创建者" width="180"></el-table-column>
      <el-table-column prop="lastModifiedAt" label="最后修改时间" width="180"></el-table-column>
      <el-table-column label="操作" width="180">
        <template v-slot="scope">
          <el-button @click="viewRecordDetails(scope.row)" type="primary" size="small">详情</el-button>
          <el-button @click="deleteRecord(scope.row)" type="danger" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 添加库存记录对话框 -->
    <el-dialog title="添加库存记录" v-model="isAddDialogVisible" width="30%">
      <el-form :model="newStockRecord">
        <el-form-item label="商品ID" required>
          <el-input v-model="newStockRecord.productId"></el-input>
        </el-form-item>
        <el-form-item label="库存变动数量" required>
          <el-input v-model="newStockRecord.changeAmount"></el-input>
        </el-form-item>
        <el-form-item label="备注说明">
          <el-input v-model="newStockRecord.note"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isAddDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmAddStockRecord">确认</el-button>
      </span>
    </el-dialog>

    <!-- 库存记录详情对话框 -->
    <el-dialog title="库存记录详情" v-model="isDetailDialogVisible" width="50%">
      <el-form :model="currentRecord" label-width="150px" readonly>
        <el-form-item label="库存记录唯一标识">
          <el-input v-model="currentRecord.recordId" readonly></el-input>
        </el-form-item>
        <el-form-item label="商品ID">
          <el-input v-model="currentRecord.productId" readonly></el-input>
        </el-form-item>
        <el-form-item label="库存变动数量">
          <el-input v-model="currentRecord.changeAmount" readonly></el-input>
        </el-form-item>
        <el-form-item label="备注说明">
          <el-input v-model="currentRecord.note" readonly></el-input>
        </el-form-item>
        <el-form-item label="记录创建时间">
          <el-input v-model="currentRecord.createdAt" readonly></el-input>
        </el-form-item>
        <el-form-item label="创建者">
          <el-input v-model="currentRecord.creator" readonly></el-input>
        </el-form-item>
        <el-form-item label="最后修改时间">
          <el-input v-model="currentRecord.lastModifiedAt" readonly></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isDetailDialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import * as XLSX from 'xlsx';

// 搜索查询参数
const searchQuery = ref({
  recordId: '',
  productId: '',
  changeAmount: '',
  createdAt: '',
});

// 库存记录数据
const stockRecords = ref([
  { recordId: 1, productId: 101, changeAmount: 50, note: '初始库存', createdAt: '2024-08-19 10:00:00', creator: '张三', lastModifiedAt: '2024-08-19 10:00:00' },
  { recordId: 2, productId: 102, changeAmount: -10, note: '售出', createdAt: '2024-08-19 11:00:00', creator: '李四', lastModifiedAt: '2024-08-19 11:00:00' },
  { recordId: 3, productId: 103, changeAmount: 20, note: '补货', createdAt: '2024-08-19 12:00:00', creator: '王五', lastModifiedAt: '2024-08-19 12:00:00' },
]);

// 过滤后的库存记录列表
const filteredStockRecords = computed(() => {
  return stockRecords.value.filter(record => {
    return (
      (searchQuery.value.recordId ? record.recordId.toString().includes(searchQuery.value.recordId) : true) &&
      (searchQuery.value.productId ? record.productId.toString().includes(searchQuery.value.productId) : true) &&
      (searchQuery.value.changeAmount ? record.changeAmount.toString().includes(searchQuery.value.changeAmount) : true) &&
      (searchQuery.value.createdAt ? record.createdAt.includes(searchQuery.value.createdAt) : true)
    );
  });
});

// 控制对话框显示
const isAddDialogVisible = ref(false);
const isDetailDialogVisible = ref(false);

// 新库存记录数据
const newStockRecord = ref({
  productId: '',
  changeAmount: '',
  note: '',
});

// 当前选中的库存记录
const currentRecord = ref({});

// 打开添加库存记录对话框
const openAddStockRecordDialog = () => {
  newStockRecord.value.productId = '';
  newStockRecord.value.changeAmount = '';
  newStockRecord.value.note = '';
  isAddDialogVisible.value = true;
};

// 确认添加库存记录
const confirmAddStockRecord = () => {
  if (newStockRecord.value.productId.trim() !== '' && newStockRecord.value.changeAmount.trim() !== '') {
    stockRecords.value.push({
      recordId: stockRecords.value.length + 1,
      productId: newStockRecord.value.productId,
      changeAmount: parseInt(newStockRecord.value.changeAmount),
      note: newStockRecord.value.note,
      createdAt: new Date().toISOString().slice(0, 19).replace('T', ' '),
      creator: '当前用户', // 需要根据实际情况填充
      lastModifiedAt: new Date().toISOString().slice(0, 19).replace('T', ' ')
    });
    isAddDialogVisible.value = false;
  } else {
    alert('商品ID和库存变动数量不能为空');
  }
};

// 搜索库存记录
const searchRecords = () => {
  console.log('搜索库存记录');
};

// 查看库存记录详情
const viewRecordDetails = (record) => {
  currentRecord.value = { ...record };
  isDetailDialogVisible.value = true;
};

// 删除单条库存记录
const deleteRecord = (record) => {
  stockRecords.value = stockRecords.value.filter(r => r.recordId !== record.recordId);
};

// 删除选中库存记录
const deleteSelectedRecords = () => {
  // 实现批量删除逻辑
  console.log('删除选中记录');
};

// 导出库存数据为Excel
const exportToExcel = () => {
  const ws = XLSX.utils.json_to_sheet(filteredStockRecords.value);
  const wb = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(wb, ws, '库存记录');
  XLSX.writeFile(wb, '库存记录.xlsx');
};

</script>

<style scoped>
/* 添加面包屑导航栏与搜索框区域之间的距离 */
.el-breadcrumb {
  margin-bottom: 20px;
}

.toolbar {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  background-color: #f5f7fa;
  padding: 10px 20px;
  border-radius: 8px;
  margin-bottom: 20px; /* 添加间距 */
}

.search-form {
  display: flex;
  gap: 10px;
}

.el-input__inner {
  border-radius: 4px;
}

.el-button {
  border-radius: 4px;
}

.action-bar {
  display: flex;
  justify-content: flex-start;
  gap: 10px;
  margin-bottom: 20px;
}

.dialog-footer {
  text-align: right;
}
</style>
